import React, { Component } from "react";
import RichEditor from "./richEditor";
import {
  Row,
  Col,
  Button,
  Modal,
  Form,
  Input,
  Image,
  Upload,
  message,
  Table,
  Tag,
  Popconfirm,
  Select,
} from "antd";
import { observer } from "mobx-react";
import { http } from "../../../api";
const { Option } = Select;

@observer
export default class Exppublish extends Component {
  state = {
    content: null,
    categorylist: [],
    keyword: "",
  };
  getContent = (a) => {
    this.setState({
      content: a,
    });
  };
  sunbpublish = () => {
    if (!(this.state.content == null) && !(this.state.keyword == "")) {
      //   console.log(this.state.content);
      var time = new Date();
      //   console.log(time);
      //   console.log(this.state.keyword);
      http
        .experience({
          content: this.state.content,
          title: this.inp.state.value,
          time: time,
          code: this.state.keyword,
          phone: localStorage.phone,
          status: 0,
        })
        .then((res) => {
          // this.setState({
          //   content: null,
          // });
          // this.inp.state.value = null;
          // this.state.keyword = null;
        });
      this.props.history.push("/main/tiku/experience/explist");
    } else {
      if (this.state.content == null) {
        message.error("请输入文章内容！");
      } else {
        message.error("请选择下拉框内容！");
      }
    }
    // console.log(this.state.content);
    // console.log(this.inp.state.value);
    // console.log(this.state.keyword);
  };
  getKeyword = (value) => {
    this.setState({
      keyword: value,
    });
  };
  componentDidMount() {
    http.categorylist().then((res) => {
      //   console.log(res);
      this.setState({
        categorylist: res.data.val,
      });
    });
  }
  render() {
    const { content } = this.state;
    return (
      <div style={{ position: "relative" }}>
        <Form name="basic">
          <Form.Item
            name="title"
            rules={[{ required: true, message: "请输入标题!" }]}
          >
            <Input
              placeholder="文章标题:一句话说明你遇到的问题或想分享的经验"
              bordered={false}
              style={{ fontSize: 18, marginBottom: 20 }}
              ref={(el) => (this.inp = el)}
            />
          </Form.Item>
          <Form.Item
            name="content"
            rules={[{ required: true, message: "请输入文章内容!" }]}
          >
            <RichEditor
              content={content}
              getContent={this.getContent}
            ></RichEditor>
          </Form.Item>
        </Form>
        <div style={{ position: "absolute", right: 0, top: -8 }}>
          <Select
            onChange={this.getKeyword}
            ref={(el) => (this.keyword = el)}
            placeholder="请选择"
            style={{ width: 200 }}
          >
            {this.state.categorylist.map((item, i) => {
              return (
                <Option key={i} value={item.code}>
                  {item.name}
                </Option>
              );
            })}
          </Select>
          <Button
            type="primary"
            ref={(el) => (this.subbtn = el)}
            style={{ margin: 10 }}
            onClick={this.sunbpublish}
          >
            发表
          </Button>
          <Button type="info">取消</Button>
        </div>
      </div>
    );
  }
}
